A lot of us came to JavaScript without a strong background in computer science. Ever find yourself recoiling in fear when someone starts talking about algorithms? It turns out when building websites we don't often have to reach to these concepts to be successful. Despite this the past few years have definitely taught me that computer science has a lot to offer UI programmers. From Angular embracing dependency injection and the React world with its Immutable objects and Dom-diffing techniques, it turns out computer science has a lot to teach UI developers. One concept that's been the most influential in the last few years of JS tooling is the abstract syntax tree. 

Abstract syntax trees are everywhere. They power the JS in your browsers. They're in your minifiers. They're in your linters. They power webpack and browserify and babel and so many other tools that make up the modern web stack. And you've probably never heard of them before.

Let me show you how abstract syntax trees work.

We'll look at some simple examples of linters and custom webpack loaders and help you envision the power that trees can bring into your programs, so you can take advantage of their potential. In ESLint each rule is passed in an abstract syntax tree, which the rule then analyzes to look for mistakes. The tree is something like giant JavaScript object literal that represents your program. Using tools like Esprima and Acorn we can convert code into an AST, transform it and then convert is back into code again.

Come join me on an exciting journey down the AST rabbit hole and never program the same way again.

About Jamund Ferguson:

Hi, I'm Jamund. I'm a UI Engineer at PayPal.

Github: xjamundx

Twitter: @xjamundx